<template>
    <div>
        <NavTop></NavTop>  
        <div style="width: 1400px;margin: auto;">
            <el-table :data="tableData" :border="parentBorder" style="width: 100%">
                <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                    <el-table :data="props.row.child" :border="childBorder">
                        <el-table-column label="商品编号" prop="id" />
                        <el-table-column label="商品名称" prop="name" />
                        <el-table-column label="价格" prop="onlineprice" />
                        <el-table-column label="数量" prop="num" />
                        <el-table-column label="总金额" prop="total" />
                    </el-table>
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderID" />
                <el-table-column label="订单日期" prop="time" />
                <el-table-column label="商品数量" prop="num" />
                <el-table-column label="订单金额" prop="sum" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <!--两个按钮不是同时显示，他根据订单中的isOrdered变量动态显示-->
                        <el-button size="small" type="danger" @click="pay(scope.$index)" v-if="!scope.row.isOrdered">支付</el-button>
                        <el-button size="small" type="success" @click="handleDelete(scope.$index)" disabled v-else>已支付</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>
    </div>
</template>

<script>
import NavTop from '../../components/NavTop.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components:{
        NavTop
    },
    data() {
        return {
            tableData : JSON.parse(sessionStorage.getItem('order')),
        }
    },
    methods: {
        handleDelete(index){
            ElMessageBox.confirm(
                '不买了？',
                '提示',
                {
                confirmButtonText: '没钱买个蛋',
                cancelButtonText: '算了',
                type: '提示',
                })
                .then(() => {
                    this.tableData.splice(index,1)//把当前行数据进行删除，注意我们只是在数组里进行删除，sessionStorage不变
                    //更新sessionStorage
                    sessionStorage.setItem('order',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: 'success',
                    message: '订单保留，嘻嘻',
                })
                })
        },
        pay(index){
            //此处假设已经跳转到支付页面，后期可以在此处完成模拟支付
            //此处完成交互对话
            ElMessageBox.confirm(
                '想付钱了？',
                '提示',
                {
                confirmButtonText: '对啊',
                cancelButtonText: '算了',
                type: 'success',
                })
                .then(() => {
                    this.tableData[index].isOrdered=true
                    sessionStorage.setItem('order',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: 'success',
                    message: '钱包-???$',
                })
                })
            
        }
    }
    
}
</script>